<template>
  <div class="container">
    <img :src="image" >

    <h3>组件"通信"</h3>

    <div class="wrapper">
      <p class="title">使用"prop attribute"从父组件向子组件传递数据</p>
      <div>根据sfc-props项目中的举例自行测试</div>
    </div>

    <div class="wrapper">
      <p class="title">使用 slot 从父组件向子组件分发内容</p>
      <div>根据sfc-slots项目中的举例自行测试</div>
    </div>

    <div class="wrapper">
      <p class="title">使用"自定义事件"从子组件向父组件传递数据</p>
      <div>根据single-file-component项目中的举例自行测试</div>
    </div>

    <div class="wrapper">
      <p class="title">使用"作用域插槽"可以实现从子组件向父组件"传递"数据</p>
      <div>根据sfc-slots项目中的举例自行测试</div>
    </div>

    <div class="wrapper">
      <p class="title">使用Provide/Inject从父组件向子组件传递数据(可以是直接父子关系，也可以是间接父子关系)</p>
      <cart></cart>
    </div>

    <div class="wrapper">
      <p class="title">使用mitt模块实现非父子组件之间的数据传递</p>
      <div>
        <reduce></reduce>
        <counter></counter>
        <increase></increase>
      </div>
    </div>

  </div>
</template>

<script>
// 导入mitt模块 (第三方模块)
import mitt from 'mitt' ;
// 导入自定义组件
import Cart from '@/components/Cart.vue' ;
import Reduce from '@/components/Reduce.vue' ;
import Counter from '@/components/Counter.vue' ;
import Increase from '@/components/Increase.vue' ;

export default {
  name: 'App',
  // 局部注册组件
  components: {
    'cart': Cart,
    'counter': Counter,
    'reduce': Reduce,
    'increase': Increase
  },
  data(){
    return {
      // 导入图片可以使用 require 实现
      image: require( '@/assets/logo.png' ),
      items: [
        { id: 1234 , name: 'Vue从入门到实战' , price: 99.8 , number: 41 } ,
        { id: 1122 , name: 'React+Redux前端开发实战' , price: 69 , number: 41 } ,
        { id: 2233 , name: 'Spring Boot编程思想(核心篇)' , price: 118 , number: 1 }
      ]
    }
  },
  // 父组件有一个 provide 选项来提供数据
  // 若要访问组件实例 property，需要将 provide 转换为返回对象的函数
  provide(){
    // 在 provide 函数中可以使用 this 来访问当前组件的 实例 property
    console.log( this );
    return { items: this.items }
  },
  created(){
    // 为了让所有的子组件都能使用 emitter 对象，我们为根组件绑定一个名称是 emitter 的属性
    this.emitter = mitt();
  }
}
</script>

<style scoped>
.container {
  text-align: center ;
}
.wrapper {
  margin: 10px ;
  text-align: left ;
  border: 1px solid #6969ff;
}
.wrapper>div {
  margin: 5px ;
}
.title {
  margin: 5px ;
  padding: 5px ;
  background: #f4f4f4;
}
</style>
